<template>
  <div class="visit-map-container">
    <div id="visit-map">
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapData } from '@/libs/samples.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      addInMap: {}
    }
  },
  computed: {
    ...mapState({
      pcapData: state => state.system.pcapData,
      ipLatMap: state => state.system.ipLatMap
    })

  },
  methods: {
    arrUnEqual (a, b) {
      return JSON.stringify(a) !== JSON.stringify(b)
    },
    reverse (arr) {
      const tmp = []
      console.log(arr)
      for (const el of arr) {
        tmp.unshift(el)
      }
      return tmp
    },
    getMapData () {
      const data = []
      this.pcapData.map(pcap => {
        const srcURL = pcap.srcURL
        const distURL = pcap.distURL
        if (this.addInMap[srcURL + distURL]) return
        this.addInMap[srcURL + distURL] = 1
        let srcLat = this.ipLatMap[srcURL]
        let distLat = this.ipLatMap[distURL]
        if (srcLat && distLat && this.arrUnEqual(srcLat, distLat)) {
          data.push([srcLat, distLat])
        }
      })
      console.log(data)
      return data
    },
    async registerWorldMap () {
      await axios
        .get('/data/world.json')
        .then(res => {
          this.$echarts.registerMap('world', res.data)
        })
    },
    renderMap () {
      const myChart = this.$echarts.init(document.getElementById('visit-map'))
      const option = {
        backgroundColor: '#000',
        globe: {
          environment: '/images/starfield.jpg',
          baseTexture: '/images/world.jpg',
          heightTexture: '/images/world_4k.jpg',
          displacementScale: 0.04,
          // displacementQuality: 'high',
          // baseColor: 'rgb(0,12,23)',
          shading: 'realistic',
          realisticMaterial: {
            roughness: 0.9
            // roughness: ROOT_PATH + '/asset/get/s/data-1497599804873-H1SHkG-mZ.jpg',
            // metalness: ROOT_PATH + '/asset/get/s/data-1497599800643-BJbHyGWQW.jpg',
            // textureTiling: [8, 4]
          },
          postEffect: {
            enable: true
          },
          light: {
            // ambient: {
            //   intensity: 0.4
            // },
            main: {
              intensity: 2,
              shadow: true
            },
            ambientCubemap: {
              // texture: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data-gl/asset/pisa.hdr',
              // exposure: 2,
              diffuseIntensity: 0.2
              // specularIntensity: 2
            }
          },
          viewControl: {
            autoRotate: true
          }
          // silent: true
        },
        series: [
          {
            type: 'lines3D',
            effect: {
              show: true,
              trailWidth: 2,
              trailLength: 0.15,
              trailOpacity: 1,
              trailColor: 'rgb(30, 30, 60)'
            },
            coordinateSystem: 'globe',
            blendMode: 'lighter',
            lineStyle: {
              width: 2,
              color: 'rgb(50, 50, 150)',
              opacity: 0.5
            },
            data: this.getMapData()
          }
        ]
      }
      myChart.setOption(option)
      this.handleResize(myChart)
    },

    handleResize (echartInstance) {
      window.onresize = () => {
        echartInstance.resize()
      }
    }
  },
  async mounted () {
    await this.registerWorldMap()
    this.renderMap()
    console.log(mapData)
  }
}
</script>

<style>
#visit-map {
  height: 800px;
}
</style>
